<template>
	<view class="main">
		<view class="content" v-for="(item , index) in contentList" :key="index">
			<view class="title">{{item.title}}</view>
			<view class="list">
				<view class="listItem" v-for="(listItem , index) in item.projectList" :key="index"
					@click="listItem.jumpSrc ? handleJump(listItem.jumpSrc) : handleSwitch(listItem.tabSrc)">
					<view style="padding: 5px;">
						<wd-img :width="30" :height="30" :src="listItem.imgSrc"></wd-img>
					</view>

					<view style="font-size: small;">
						{{listItem.proName}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const contentList = [{
		title: '物业服务',
		projectList: [{
				imgSrc: '/static/icon/1.png',
				proName: '生活缴费',
				jumpSrc: "/pages/servers/LifePay/LifePay"
			},
			{
				imgSrc: '/static/icon/9.png',
				proName: '停车费',
				jumpSrc: "/pages/servers/ParkPay/ParkPay"
			},
			{
				imgSrc: '/static/icon/2.png',
				proName: '家庭成员',
				jumpSrc: "/pages/servers/FamilyMembers/FamilyMembers"
			},
			{
				imgSrc: '/static/icon/3.png',
				proName: '访客通行',
				jumpSrc: "/pages/servers/Permit/Permit"
			},
			{
				imgSrc: '/static/icon/3.png',
				proName: '投诉咨询',
				jumpSrc: "/pages/servers/CallProperty/CallProperty"
			},
			{
				imgSrc: '/static/icon/6.png',
				proName: '报事维修',
				jumpSrc: "/pages/servers/Repair/Repair"
			},
			{
				imgSrc: '/static/icon/7.png',
				proName: '社区公告',
				jumpSrc: "/pages/servers/NoticsList/NoticsList"
			},
			{
				imgSrc: '/static/icon/8.png',
				proName: '一键开门',
				jumpSrc: '',
				tabSrc: '/pages/open/index'
			},
			{
				imgSrc: '/static/icon/my1.png',
				proName: '业主信息',
				jumpSrc: '',
				tabSrc: '/pages/about/index'
			},
			{
				imgSrc: '/static/icon/my6.png',
				proName: '车位申请',
				jumpSrc: '/pages/servers/ParkingSpace/ParkingSpace'
			},
			{
				imgSrc: '/static/icon/order4.png',
				proName: '场地预约',
				jumpSrc: '/pages/servers/ServiceAppoint/ServiceAppoint'
			},
			{
				imgSrc: '/static/icon/my3.png',
				proName: '智能充电',
				jumpSrc: ''
			},
			{
				imgSrc: '/static/icon/my9.png',
				proName: '物业打分',
				jumpSrc: ''
			}
		]
	}]

	const handleJump = (jumpSrc) => {
		uni.navigateTo({
			url: jumpSrc
		})
	}

	const handleSwitch = (tabSrc) => {
		uni.switchTab({
			url: tabSrc
		})
	}
</script>

<style lang="less">
	.main {
		height: 100vh;
		background-color: rgb(238, 238, 238);
	}

	.content {
		background-color: white;
		padding: 5px;
		padding-bottom: 20px;

		.title {
			margin: 10px 10px 20px 10px;
			font-weight: bold;
		}

		.list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 5px;

			.listItem {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>